<template>
    <div>
        <h1 @click="add">{{count}} {{x}} {{y}}</h1>
        <input type="text" v-model="title" @keydown.enter="addTodo"/>
        <button v-if="active < all" @click="clear">清理</button>
        <span class="dustbin">垃圾桶</span>
        <div class="animate-wrap">
            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnt">
                <div class="animate" v-show="animate.show">哈哈哈</div>
            </transition>
        </div>
        <ul v-if="todos.length">
            <transition-group name="flip-list" tag="ul">
                <li v-for="(todo, i) in todos" :key="todo.title">
                    <input type="checkbox" v-model="todo.done" />
                    <span :class="{done: todo.done}">{{ todo.title }}</span>
                    <span @click="removeTodo($event, i)">❌</span>
                </li>
            </transition-group>
        </ul>
        <div v-else>暂无数据</div>
        <div>
            全选<input type="checkbox" v-model="allDone" />
            <span>{{ active }} / {{ all }}</span>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watchEffect, computed } from 'vue'
import {useFullscreen} from '@vueuse/core'
import { useMouse, useStorage } from '../utils/mouse'
// const {isFullscreen, enter, exit, toggle} = useFullscreen()
// console.log(isFullscreen.value)
let { x, y } = useMouse()
let count = ref(1)
let color = ref('red')
function add() {
    count.value++
    color.value = Math.random() > 0.57 ? 'blue' : 'red'
}

let {title, todos, addTodo, removeTodo, clear, active, all, allDone, beforeEnter, enter, afterEnt, animate} = useTodos()
function useTodos() {
    let title = ref('');
    let todos = useStorage('todos', [])
    let animate = reactive({
        show: false,
        el: null
    })
    function beforeEnter(el) {
        let dom = animate.el
        console.log(dom)
        console.log(el)
        let rect = dom.getBoundingClientRect()
        let x = window.innerWidth - rect.left - 10
        let y = rect.top - 10
        el.style.transform = `translate(-${x}px, ${y}px)`
    }
    function enter(el, done) {
        document.body.offsetHeight
        console.log(el)
        console.log(done)
        el.style.transform = `translate(0,0)`
        el.addEventListener('transitionend', done)
    }
    function afterEnt(el) {
        console.log('none')
        animate.show = false
        el.style.display = 'none'
    }
    function addTodo() {
        todos.value.push({
            title: title.value,
            done: false
        })
        title.value = ''
    }
    function removeTodo(e, i) {
        animate.el = e.target
        animate.show = true
        todos.value.splice(i, 1)
    }
    function clear() {
        todos.value = todos.value.filter(todo => !todo.done)
    }
    let active = computed(() => todos.value.filter(todo => !todo.done).length)
    let all = computed(() => todos.value.length)
    let allDone = computed({
        get: () => todos.value.every(todo => todo.done),
        set: (value) => {
            todos.value.forEach(todo => todo.done = value)
        }
    });
    return {title, todos, addTodo, removeTodo, clear, active, all, allDone, beforeEnter, enter, afterEnt, animate};
}


</script>

<style scoped>
h1 {
    color: v-bind(color);
}
.flip-list-move {
    transition: transform 0.8s ease;
}
.flip-list-enter-active, .flip-list-leave-active {
    transition: opacity 0.5s ease;
}
.flip-list-enter-from, .flip-list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
.animate-wrap .animate {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 100;
    transition: all 0.5s linear;
}
</style>